<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的QQ空间 - 分享生活，记录精彩</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="header-container">
            <div class="logo">
                <i class="fab fa-qq"></i>
                <span>QQ空间</span>
            </div>
            <nav class="nav-menu">
                <a href="#home" class="nav-item active" data-tab="home">
                    <i class="fas fa-home"></i> 主页
                </a>
                <a href="#photos" class="nav-item" data-tab="photos">
                    <i class="fas fa-images"></i> 相册
                </a>
                <a href="#videos" class="nav-item" data-tab="videos">
                    <i class="fas fa-video"></i> 视频
                </a>
                <a href="#blog" class="nav-item" data-tab="blog">
                    <i class="fas fa-blog"></i> 日志
                </a>
                <a href="#about" class="nav-item" data-tab="about">
                    <i class="fas fa-user"></i> 关于我
                </a>
            </nav>
            <div class="header-actions">
                <button class="btn-icon" id="themeToggle">
                    <i class="fas fa-moon"></i>
                </button>
                <button class="btn-icon" id="notificationBtn">
                    <i class="fas fa-bell"></i>
                    <span class="badge">3</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧个人信息栏 -->
        <aside class="sidebar">
            <div class="profile-card">
                <div class="cover-photo">
                    <img src="assets/images/cover.jpg" alt="封面">
                    <div class="cover-overlay"></div>
                </div>
                <div class="profile-info">
                    <div class="avatar-container">
                        <img src="assets/images/avatar.jpg" alt="头像" class="avatar">
                        <div class="online-status online"></div>
                    </div>
                    <h2 class="username">张三</h2>
                    <p class="user-motto">生活不止眼前的苟且，还有诗和远方</p>
                    <div class="user-stats">
                        <div class="stat-item">
                            <span class="stat-number">128</span>
                            <span class="stat-label">日志</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">2.3k</span>
                            <span class="stat-label">照片</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">56</span>
                            <span class="stat-label">视频</span>
                        </div>
                    </div>
                </div>
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <span>zhangsan@qq.com</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>138****8888</span>
                    </div>
                    <div class="contact-item">
                        <i class="fab fa-weixin"></i>
                        <span>zhangsan_wx</span>
                    </div>
                    <div class="contact-item">
                        <i class="fab fa-github"></i>
                        <span>github.com/zhangsan</span>
                    </div>
                </div>
                <div class="profile-actions">
                    <button class="btn-primary" id="editProfileBtn">
                        <i class="fas fa-edit"></i> 编辑资料
                    </button>
                    <button class="btn-secondary" id="shareBtn">
                        <i class="fas fa-share-alt"></i> 分享空间
                    </button>
                </div>
            </div>

            <!-- 访客记录 -->
            <div class="visitors-card">
                <h3 class="card-title">
                    <i class="fas fa-users"></i> 最近访客
                </h3>
                <div class="visitors-list" id="visitorsList">
                    <!-- 动态加载 -->
                </div>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="content">
            <!-- 发布动态 -->
            <div class="post-composer">
                <div class="composer-header">
                    <img src="assets/images/avatar.jpg" alt="头像" class="composer-avatar">
                    <textarea placeholder="分享你的生活..." id="postContent"></textarea>
                </div>
                <div class="composer-actions">
                    <div class="composer-tools">
                        <button class="tool-btn" id="addImageBtn">
                            <i class="fas fa-image"></i> 图片
                        </button>
                        <button class="tool-btn" id="addVideoBtn">
                            <i class="fas fa-video"></i> 视频
                        </button>
                        <button class="tool-btn" id="addMoodBtn">
                            <i class="fas fa-smile"></i> 心情
                        </button>
                        <button class="tool-btn" id="addLocationBtn">
                            <i class="fas fa-map-marker-alt"></i> 位置
                        </button>
                    </div>
                    <button class="btn-primary" id="publishBtn">
                        <i class="fas fa-paper-plane"></i> 发布
                    </button>
                </div>
            </div>

            <!-- 内容标签页 -->
            <div class="tab-content">
                <!-- 主页动态 -->
                <div class="tab-pane active" id="home">
                    <div class="posts-container" id="postsContainer">
                        <!-- 动态内容将在这里动态加载 -->
                    </div>
                    <div class="load-more">
                        <button class="btn-secondary" id="loadMorePosts">
                            <i class="fas fa-spinner"></i> 加载更多
                        </button>
                    </div>
                </div>

                <!-- 相册 -->
                <div class="tab-pane" id="photos">
                    <div class="photo-albums">
                        <div class="album-grid" id="albumGrid">
                            <!-- 相册内容将在这里动态加载 -->
                        </div>
                    </div>
                </div>

                <!-- 视频 -->
                <div class="tab-pane" id="videos">
                    <div class="video-grid" id="videoGrid">
                        <!-- 视频内容将在这里动态加载 -->
                    </div>
                </div>

                <!-- 日志 -->
                <div class="tab-pane" id="blog">
                    <div class="blog-list" id="blogList">
                        <!-- 日志内容将在这里动态加载 -->
                    </div>
                </div>

                <!-- 关于我 -->
                <div class="tab-pane" id="about">
                    <div class="about-card">
                        <h2>个人简介</h2>
                        <div class="about-content">
                            <p>大家好，我是张三，一名热爱生活的前端工程师。喜欢摄影、旅行和美食，希望通过QQ空间记录生活的点点滴滴。</p>
                            <div class="skills-section">
                                <h3>技能标签</h3>
                                <div class="skill-tags">
                                    <span class="skill-tag">JavaScript</span>
                                    <span class="skill-tag">Vue.js</span>
                                    <span class="skill-tag">React</span>
                                    <span class="skill-tag">Node.js</span>
                                    <span class="skill-tag">摄影</span>
                                    <span class="skill-tag">旅行</span>
                                </div>
                            </div>
                            <div class="timeline-section">
                                <h3>人生轨迹</h3>
                                <div class="timeline">
                                    <div class="timeline-item">
                                        <div class="timeline-date">2020</div>
                                        <div class="timeline-content">开始前端开发之旅</div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-date">2021</div>
                                        <div class="timeline-content">加入互联网公司</div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-date">2023</div>
                                        <div class="timeline-content">成为资深前端工程师</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal" id="imageModal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img id="modalImage" src="" alt="">
        </div>
    </div>

    <!-- 视频播放模态框 -->
    <div class="modal" id="videoModal">
        <div class="modal-content video-modal">
            <span class="close">&times;</span>
            <video id="modalVideo" controls></video>
        </div>
    </div>

    <!-- Toast 提示 -->
    <div class="toast" id="toast"></div>

    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/components.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
